<template>
  <view class="replenish">
    <view class="header">
      <u-search
        height="60rpx"
        searchIconColor="#4b3138"
        :showAction="false"
        placeholder="请输入搜索用户ID"
        shape="square"
        showAction
        actionText="搜索"
        v-model="keyword"
        @search="searchConfirm"
        @custom="searchConfirm"
      ></u-search>
    </view>
	
	
	<scroll-view
	  scroll-y="true"
	  class="scrollView"
	  :style="{ height: mainHeight }"
	>
	  <view
	    v-for="(item, index) in mineGroupList"
	    :key="index"
	    class="OtherTeami"
	  >
	    <view class="OtherTeam">
	      <view class="image">
	        <image :src="item.avatar"></image>
	      </view>
	      <view class="teamIntro">
	        <view class="nameAmedal">
	          <view class="team_name">{{ item.nickName }}</view>
	        </view>
	        <view class="ID">ID: {{ item.userId }}</view>
	        <view class="phoneTime"
	          >{{
					item.phonenumber?
	              `${item.phonenumber.slice(0, 3)}****${item.phonenumber.slice(
	                7
	              )}`:''
	            }}
	       </view
	        >
	      </view>
	    </view>
	  </view>
	  <Empty v-if="mineGroupList.length == 0" />
	</scroll-view>
	
	
    <uni-forms
      class="uniForms"
      ref="valiForm"
      label-width="150px"
      :rules="rules"
      :modelValue="valiFormData"
    >
      <uni-forms-item label="配货数量:" required name="goodTotal">
        <uni-easyinput
          v-model="valiFormData.goodTotal"
          placeholder="请输入配货数量"
        />
      </uni-forms-item>
    </uni-forms>
    <view class="bottom">
      <button type="default" class="black" @click="confirm" :plain="true">
        确定
      </button>
    </view>

  </view>
</template>

<script>
import mineApi from "@/api/mine";
import { numberMul } from "@/utils/index";

export default {
  components: {
  },
  data() {
    return {
		keyword: null,
      goodId: null,
      goodDetail: {},
      valiFormData: {
        goodTotal: "",
      },
	  mineGroupList:[],
      rules: {
        goodTotal: {
          rules: [
            {
              required: true,
              errorMessage: "数量不能为空",
            },
            {
              format: "number",
              errorMessage: "数量只能输入数字",
            },
          ],
        },
      },
      paymentPopupShow: false,
      payAmount: 0,
      id: null, // 补货订单id
    };
  },
  onLoad(options) {
    this.goodId = options.id;
    // this.getCommodityDetails();
  },
  onShow() {
    // 查询订单支付状态-第三方平台
    // this.getOrderPayStatus(this.id);
  },
  methods: {
    searchConfirm(e) {
      mineApi.getUser({ userId: e }).then((res) => {
        if (res.code == 200) {
			if (res.data.userId) {
				this.mineGroupList = []
				this.mineGroupList.push(res.data)
			}
		console.log(this.mineGroupList,'mineGroupList');
        }
      });
    },
    getCommodityDetails() {
      let data = {
        goodId: this.goodId,
      };
      mineApi.getCommodityDetails(data).then((res) => {
        if (res.code == 200) {
          this.goodDetail = res.data;
        }
      });
    },
    confirm() {
		if (this.mineGroupList.length == 0) {
			uni.showToast({
			  title: "请搜索用户",
			  icon: "none",
			});
			return
		}
      this.$refs["valiForm"]
        .validate()
        .then((res) => {
			let obj = {
				id:this.goodId,
				num:this.valiFormData.goodTotal,
				userId:this.mineGroupList[0].userId,
			}
			mineApi.cloudWarehouseReplenishment(obj).then((res) => {
			  if (res.code == 200) {
				  setTimeout(() => {
				    uni.navigateBack();
				  }, 1500);
			  }
			});
			
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.replenish {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background-color: #fff;

  .item {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;

    image {
      width: 65px;
      height: 65px;
    }

    .itemInfo {
      width: calc(100% - 90px);
      color: #000;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      height: 65px;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 17px;
      .money {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  /deep/ .uni-forms-item {
    display: flex;
    flex-direction: column;
  }
  .specifications {
    width: 100%;
    padding: 0 10rpx;

    .specificationsi {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;

        image {
          width: 40rpx;
          height: 40rpx;
        }
        .text {
          margin-left: 10rpx;
        }
      }

      .right {
        width: 40rpx;
        height: 40rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .bottom {
    border-top: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150rpx;
    position: absolute;
    bottom: 0;
    left: 0;

    .black {
      background-color: #000;
      color: #fff;
      border-radius: 25px;
      width: 80%;
    }
  }
}


.myTeam {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

.scrollView {
  width: 100%;
  padding: 0 12px;

  .OtherTeami {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 0 10px 15px;
    margin: 15px 0;

    .OtherTeam {
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;

      .image {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .teamIntro {
        width: calc(100% - 70px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 5px;

        .nameAmedal {
          display: flex;

          .team_name {
            color: #000;
            font-weight: 600;
            font-size: 32rpx;
          }

          .medal {
            flex: 1;
            height: 40rpx;
            display: flex;
            align-items: center;
            margin-left: 2px;
          }
        }

        .ID {
          color: #838383;
        }

        .phoneTime {
          color: #838383;
        }
      }
    }

    .divider {
      color: #000;
      font-weight: 600;
      width: 100%;
      height: 30px;
      line-height: 30px;
    }

    .teamInfo {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .teamInfoi {
        width: 25%;

        .teamInfoi_num {
          color: #000;
          font-weight: 600;
          font-size: 30rpx;
        }

        .teamInfoi_Label {
          color: #838383;
        }
      }
    }
  }
}

</style>
